<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form 表单 <input> 操作</title>
    <script src="../2025.10.17/from.js"></script>
</head>

<body>
    <div>
        <h2>基础信息收集</h2>
        <form>
            <h4>用户姓名：</h4>
            <!-- required：强制必填验证 -->
            <input id="in1" name="username" type="text" placeholder="请输入用户名" required="on">
            <br>

            <h4>用户密码：</h4>
            <input id="in2" name="password" type="password" placeholder="请输入密码">
            <br>

            <!-- 单选按钮 -->
            <h4>用户性别：</h4>
            <input id="in3" name="sex" type="radio">男

            <input id="in3" name="sex" type="radio">
            <label for="in3">女</label>
            <br>

            <!-- 多选框 -->
            <h4>技能选择（多选）</h4>
            <input id="in4" name="skills" type="checkbox">Web前段
            <input id="in4" name="skills" type="checkbox">Java 后端

            <input id="in4" name="skills" type="checkbox">
            <label for="in4">软技能</label>
            <br>

            <!-- 文件上传 -->
            <h4>上传头像图片</h4>
            <!-- accept：限制可上传文件类型（支持MIME类型或扩展名） -->
            <input id="in5" name="file" type="file" accept=".gig,.png">
            <br>

            <!-- 邮箱验证 -->
            <h4>邮箱验证</h4>
            <!-- 支持multiple属性允许输入多个逗号分隔的邮箱 -->
            <input id="in6" name="email" type="email" placeholder="输入邮箱地址">
            <br>

            <!-- 数字输入 -->
            <h4>意愿身高（cm）</h4>
            <input id="in7" name="height" type="number" min="100" max="300" step="50">
        </form>
    </div>

</body>

</html>